<template>
  <div>
    <el-card id="card" :body-style="{padding: '1rem' }">
      <div>
        <el-row>
          <el-col :span="16">
            <div id="inList">
              <h3>{{ itemInfo.title }}</h3>
              <div>
                <el-tag v-for="(tag) in itemInfo['tag_list']" :key="tag" class="tag">{{ tag }}
                </el-tag>
              </div>
              <div class="bottomInfo">作者: {{ author }} &nbsp;&nbsp;&nbsp;发布于 {{ itemInfo['created_at'] }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <el-image
              style="width: 100%; height: 150px"
              :src="itemInfo['cover_url']"
              fit="scale-down"
            />
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BoxCard',
  props: {
    itemInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      author: 'lishuangzhi'
    }
  },
  methods: {
    tap() {
    }
  }

}
</script>

<style scoped>
.tag {
  margin-right: 10px;
}
#card:hover {
  box-shadow: 0 0 .8rem #8c8c8c;
}
#inList {
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
  color: #000;	/* 去除默认的颜色和点击后变化的颜色 */
}
.bottomInfo {
  color: grey;
}
</style>
